import { Card, Statistic } from 'antd'
import PropTypes from 'prop-types'
import './index.scss'

const StatCard = ({ title, value, prefix, suffix, valueStyle, footer }) => {
  return (
    <Card className="stat-card">
      <Statistic
        title={title}
        value={value}
        prefix={prefix}
        suffix={suffix}
        valueStyle={valueStyle}
      />
      {footer && (
        <div className="stat-footer">
          <span className="footer-label">{footer.label}</span>
          <span className={`footer-value ${footer.className}`}>
            {footer.value}
            {footer.icon && <span className="footer-icon">{footer.icon}</span>}
          </span>
        </div>
      )}
    </Card>
  )
}

StatCard.propTypes = {
  title: PropTypes.string.isRequired,
  value: PropTypes.number.isRequired,
  prefix: PropTypes.node,
  suffix: PropTypes.node,
  valueStyle: PropTypes.object,
  footer: PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.string,
    icon: PropTypes.node,
    className: PropTypes.string
  })
}

export default StatCard
